Composants
Button Animated
Un bouton composé d'un label et d'une icône animée, dont la position varie selon le variant. Le motion est appliqué directement sur l'icône, offrant un feedback visuel distinctif à chaque interaction.
Ce composant est conçu comme un système ouvert : de nouveaux variants animés peuvent être ajoutés sans remettre en cause la cohérence du composant.
# Usage
Usage
Le Button Animated enrichit une action d'un retour visuel animé, pour renforcer la compréhension de l'interaction ou attirer l'attention sur une action clé. Il se distingue des boutons standards par la présence systématique d'un motion sur l'icône, propre à chaque variant.
Comportement
Chaque variant possède son propre type d'animation appliqué sur l'icône. Les animations actuelles reposent sur deux mécaniques :
- Translation : l'icône se déplace dans une direction pour suggérer un mouvement ou une progression.
- Apparition / Disparition : l'icône apparaît ou disparaît pour signaler un changement d'état ou confirmer une action.
La position de l'icône (avant ou après le label) est définie par le variant.
Quand utiliser
- Lorsqu'une action mérite un retour visuel renforcé, au-delà du simple changement d'état.
- Pour des actions dont le sens est amplifié par le mouvement (ex : progression, ajout, confirmation).
- Quand l'animation contribue à guider l'utilisateur sans le distraire.
Quand ne pas utiliser
- Pour des actions neutres ou utilitaires qui ne bénéficient pas d'un renforcement visuel (ex : navigation, accès à l'aide, mentions légales).
- En trop grand nombre sur une même page : la multiplication des animations dilue leur impact et peut sur-stimuler l'utilisateur.
- Si le contexte requiert un bouton sobre et discret : préférer un bouton sans animation.
# Do & Don't
**Utiliser pour la conversion principale**
L'animation du panier est dédiée à l'ajout direct d'un produit au panier. La boucle animée attire l'attention sur l'action d'achat, et la confirmation visuelle rassure l'utilisateur.
**Mettre en panier un produit**
L'animation du panier est dédiée à l'ajout direct d'un produit au panier. La boucle animée attire l'attention sur l'action d'achat, et la confirmation visuelle rassure l'utilisateur.
**Réserver le motion aux actions qui le justifient**
L'animation doit toujours avoir du sens : elle renforce l'action, elle ne la décore pas.